<template>
  <div class="container">
    <div class="acFunContainer">
      <!-- swiper -->
      <div class="block">
        <swiper
          :modules="modules"
          :slides-per-view="1"
          :space-between="50"
          navigation
          :pagination="{ clickable: true }"
          :autoplay="true"
        >
          <swiper-slide v-for="item in bannerList" :key="item.targetId">
            <img :src="item.imageUrl" alt="" />
          </swiper-slide>
        </swiper>
      </div>
      <!-- acFun列表 -->
      <div class="acFun">
        <div class="acFunBox">
          <div class="acFunImg">
            <img
              src="https://tx2.a.kwimgs.com/uhead/AB/2021/11/30/14/BMjAyMTExMzAxNDQ0NDFfNDg0NTYzNzMwXzg4MzM0NDIyNzlfbHY=.jpg"
              alt=""
            />
          </div>
          <div class="acFunContext">
            <h5>老白赏金12连败三星五费！</h5>
            <div class="acFunInfo">
              <StarFilled style="width: 1em; height: 1em; margin-right: 8px" />
              <span>43w喜欢</span>
            </div>
          </div>
        </div>
        <div class="acFunBox">
          <div class="acFunImg">
            <img
              src="https://tx2.a.kwimgs.com/uhead/AB/2021/11/30/14/BMjAyMTExMzAxNDQ0NDFfNDg0NTYzNzMwXzg4MzM0NDIyNzlfbHY=.jpg"
              alt=""
            />
          </div>
          <div class="acFunContext">
            <h5>老白赏金12连败三星五费！</h5>
            <div class="acFunInfo">
              <StarFilled style="width: 1em; height: 1em; margin-right: 8px" />
              <span>43w喜欢</span>
            </div>
          </div>
        </div>
        <div class="acFunBox">
          <div class="acFunImg">
            <img
              src="https://tx2.a.kwimgs.com/uhead/AB/2021/11/30/14/BMjAyMTExMzAxNDQ0NDFfNDg0NTYzNzMwXzg4MzM0NDIyNzlfbHY=.jpg"
              alt=""
            />
          </div>
          <div class="acFunContext">
            <h5>老白赏金12连败三星五费！</h5>
            <div class="acFunInfo">
              <StarFilled style="width: 1em; height: 1em; margin-right: 8px" />
              <span>43w喜欢</span>
            </div>
          </div>
        </div>
        <div class="acFunBox">
          <div class="acFunImg">
            <img
              src="https://tx2.a.kwimgs.com/uhead/AB/2021/11/30/14/BMjAyMTExMzAxNDQ0NDFfNDg0NTYzNzMwXzg4MzM0NDIyNzlfbHY=.jpg"
              alt=""
            />
          </div>
          <div class="acFunContext">
            <h5>老白赏金12连败三星五费！</h5>
            <div class="acFunInfo">
              <StarFilled style="width: 1em; height: 1em; margin-right: 8px" />
              <span>43w喜欢</span>
            </div>
          </div>
        </div>
        <div class="acFunBox">
          <div class="acFunImg">
            <img
              src="https://tx2.a.kwimgs.com/uhead/AB/2021/11/30/14/BMjAyMTExMzAxNDQ0NDFfNDg0NTYzNzMwXzg4MzM0NDIyNzlfbHY=.jpg"
              alt=""
            />
          </div>
          <div class="acFunContext">
            <h5>老白赏金12连败三星五费！</h5>
            <div class="acFunInfo">
              <StarFilled style="width: 1em; height: 1em; margin-right: 8px" />
              <span>43w喜欢</span>
            </div>
          </div>
        </div>
        <div class="acFunBox">
          <div class="acFunImg">
            <img
              src="https://tx2.a.kwimgs.com/uhead/AB/2021/11/30/14/BMjAyMTExMzAxNDQ0NDFfNDg0NTYzNzMwXzg4MzM0NDIyNzlfbHY=.jpg"
              alt=""
            />
          </div>
          <div class="acFunContext">
            <h5>老白赏金12连败三星五费！</h5>
            <div class="acFunInfo">
              <StarFilled style="width: 1em; height: 1em; margin-right: 8px" />
              <span>43w喜欢</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  name: 'AcFun',
  components: {
    Swiper,
    SwiperSlide,
  },
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import { StarFilled } from '@element-plus/icons'

import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import {
  Swiper,
  SwiperSlide,
} from '../../../../node_modules/swiper/vue/swiper-vue'
import '../../../../node_modules/swiper/swiper-bundle.min.css'

import { BannerListApi } from '../../../api/BannerList'

// 轮播图数据
const bannerList = ref([])
const modules = [Navigation, Pagination, Scrollbar, A11y]
// 获取swiper数据
const getBannerList = async () => {
  const res = await BannerListApi()
  bannerList.value = res.banners
}

onMounted(() => {
  // 发送请求获取banner
  getBannerList()
})
</script>

<style lang="less" scoped>
// swiper
.block {
  width: 565px;
}
.swiper-slide {
  height: 320px;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
}
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet {
  background-color: #fff;
}
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #fe3666;
}

// 内容盒子
.container {
  margin: 0 auto;
  width: 1126px;
  //   margin-bottom: 200px;
}
.acFunContainer {
  display: flex;
  overflow: hidden;
}
.acFun {
  width: 562px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 17px;
}
.acFunBox {
  width: 165px;
  margin-right: 16px;
  margin-bottom: 46px;
  .acFunImg {
    width: 100%;
    height: 108px;
    font-size: 0;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    img {
      width: 100%;
      position: absolute;
      top: -90px;
    }
  }
  .acFunContext {
    padding-top: 16px;
    h5 {
      margin: 0;
      width: 159.5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 15px;
    }
    .acFunInfo {
      display: flex;
      margin-top: 5px;
      color: #999;
    }
  }
}
</style>
